<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div2 {
            width: 1280px;
            margin: 0 auto;
           
        }

        .ula1 li,
        h1 {
            clear: both;
        }

        .div2 li {
            list-style: none;
            float: left;
        }

        .div2 a {
            text-decoration: none;
            color: #333333
        }

        .ula {
            width: 1280px;
            height: 320px;
            margin: 0 auto;
            padding: 0;
        }

        .ula>li {

            width: 300px;
            height: 300px;
            margin: 10px;

        }
        
        .img1 {
            width: 300px;
            height: 200px;
            position: relative;
        }
        .circle {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            border-color: #ccc;
            background-color: rgb(255, 255, 255);
            position: absolute;
            top: 57px;
            left: 110px;
            display: none;

        }

        .triangle {
            width: 0px;
            height: 0px;
            border: #696969 solid 18px;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
            position: absolute;
            top: 75px;
            left: 140px;

            display: none;
        }

        .div3:hover {
            transform:  scale(1.1);
            cursor: pointer;
            transition: 1s linear;

        }

        .div3:hover .circle {
            display: block;
        }

        .div3:hover .triangle {
            display: block;
        }
        .ula1 {
            height: 100px;
            padding: 0;
            margin-left: 0;
        }

        .ula1 li {
            float: left;

        }

        .ula1 img {
            width: 30px;
            height: 20px;
        }
        a:hover{
            color:#90EE90;
        }
    </style>
</head>

<body>
    <div class="div2">
        <ul class="ula">
            <li>
                <div class="div3"><img src="image/m9.jpg" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">无花果</a></li>
                    <li><a href="#">李宇春</a></li>
                    <li><img src="image/aaa.png" alt="">
                        2021-12-27
                    </li>
                </ul>
            </li>
            <li>
                <div class="div3"><img src="image/m10.jpg" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">娱乐时代</a></li>
                    <li><a href="#">汪苏泷</a></li>
                    <li><img src="image/aaa.png" alt="">
                        2021-12-27
                    </li>
                </ul>
            </li>
            <li>
                <div class="div3"><img src="image/m11.jpg" alt="" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">浓雾</a></li>
                    <li><a href="#">陈明喜</a></li>
                    <li><img src="image/aaa.png" alt="">
                        2021-12-27
                    </li>
                </ul>
            </li>
            <li>
                <div class="div3"><img src="image/m12.jpg" alt="" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">送你一朵小红花</a></li>
                    <li><a href="#">赵英俊</a></li>
                    <li><img src="image/aaa.png" alt="">
                       2021-12-27
                    </li>
                </ul>
            </li>
        </ul>
       <ul class="ula">
            <li>
                <div class="div3"><img src="image/m1.png" alt="" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">旷梦</a></li>
                    <li><a href="#">汪苏泷</a></li>
                    <li><img src="image/aaa.png" alt="">
                        2021-12-27
                    </li>
                </ul>
            </li>
            <li>
                <div class="div3"><img src="image/m2.png" alt="" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">不遗憾</a></li>
                    <li><a href="#">李荣浩</a></li>
                    <li><img src="image/aaa.png" alt="">
                        2021-12-27
                    </li>
                </ul>
            </li>
            <li>
                <div class="div3"><img src="image/m3.jpg" alt="" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">一秒钟</a></li>
                    <li><a href="#">刘浩存</a></li>
                    <li><img src="image/aaa.png" alt="">
                        2021-12-27
                    </li>
                </ul>
            </li>
            <li>
                <div class="div3"><img src="image/m4.jpg" alt="" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">友谊地久天长</a></li>
                    <li><a href="#">王源</a></li>
                    <li><img src="image/aaa.png" alt="">
                       2021-12-27
                    </li>
                </ul>
            </li>
        </ul>
        <ul class="ula">
            <li>
                <div class="div3"><img src="image/m5.jpg" alt="" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">谢谢爱过</a></li>
                    <li><a href="#">冯提莫</a></li>
                    <li><img src="image/aaa.png" alt="">
                        2021-12-27
                    </li>
                </ul>
            </li>
            <li>
                <div class="div3"><img src="image/m6.jpg" alt="" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">屋顶着火</a></li>
                    <li><a href="#">宋茜</a></li>
                    <li><img src="image/aaa.png" alt="">
                        2021-12-27
                    </li>
                </ul>
            </li>
            <li>
                <div class="div3"><img src="image/m7.jpg" alt="" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">如果声音不记得</a></li>
                    <li><a href="#">房东的猫</a></li>
                    <li><img src="image/aaa.png" alt="">
                        2021-12-27
                    </li>
                </ul>
            </li>
            <li>
                <div class="div3"><img src="image/m8.jpg" alt="" class="img1">
                    <p class="circle">
                        <p class="triangle"></p>
                        </p></div>
                <ul class="ula1">
                    <li><a href="#">歌路</a></li>
                    <li><a href="#">刘瑞琦</a></li>
                    <li><img src="image/aaa.png" alt="">
                       2021-12-27
                    </li>
                </ul>
            </li>
        </ul>
       
        
    </div>
</body>

</html>